<!-- 帖子 -->
<template>
  <el-main style="padding: 20px;">
    <el-button type="primary" size="mini" icon="el-icon-plus" @click="tianjia=true">
      添加资讯
    </el-button>
    <!-- 添加 -->
    <el-dialog
      :visible.sync="tianjia"
      width="80%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="文字">
          <el-input v-model="form.text"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            :action="url"
            name="fileData"
            :on-success="onsuss"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
          <el-button type="primary" @click="tian">确定</el-button>
          <el-button @click="tianjia=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-radio-group v-model="radio">
      <el-radio :label="item.categoryCode" v-for="(item, index) of type" :key="index">{{ item.categoryName }}</el-radio>
    </el-radio-group>
    <div class="table-box">
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="text" label="内容"></el-table-column>
        <el-table-column label="内容">
          <template slot-scope="scope" v-if="scope.row.pics">
            <img v-for="(item,index) in scope.row.pics.split(',')" :key="index" :src="item" alt="" style="width: 100px;">
          </template>
        </el-table-column>
               <el-table-column label="操作">
         <template slot-scope="scope">
            <el-button v-if="radio!=2" @click="shenhe(scope.row)" type="text" size="mini">通过</el-button>
            <el-button type="text" size="mini" @click="deleteObj(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="data.pageNum"></el-pagination>
    </div>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      // url:'https://api.shida123.cn/front/file/upload',
      url: '  http://localhost:8082/front/file/upload',
      form:{},
      tianjia:false,
      type: [],
      list: [],
      data: [],
      content: [],
      radio: '',
      page: 1,
      size: 20,
      imgUrl:[],
      dialogImageUrl: '',
      dialogVisible: false
    };
  },
  watch:{
    radio(){
      this.page = 1;
      this.getGroup()
    }
  },
  inject:['reload'],
  mounted: function() {
    this.getType().then(this.getData);
  },
  methods: {
    onsuss(response, file, fileList){
      //console.log(response.url)
      this.imgUrl.push(response.url)
    },
    tian(){
      let that =this;
      //console.log(this.imgUrl)
      this.form.pics = this.imgUrl.join(',')
      this.form.type = 2;
      that.postJson(`/back/circleinfos/addCircleInfo`,that.form).then(res => {
        //console.log(res)
        that.tianjia = false;
        let id = res.data.data.infoId;
        //console.log(res.data)
        that.postRequest(`/back/circleinfos/check/${id}`).then(res => {
          //console.log(res)
          that.$message(res.data.msg);
          this.reload()
        });
      });
    },
          handleRemove(file, fileList) {
        //console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        //console.log(this.dialogImageUrl)
        this.dialogVisible = true;
        this.reload()
      },
    deleteObj(e){

      this.postRequest('/back/circleinfos/deleteCircle?infoId='+e.infoId).then(res => {
        //console.log(res)
        this.$message(res.data.msg);
        this.reload()
      });
    },
    shenhe(e){
      //console.log(e.infoId)
      this.postRequest(`/back/circleinfos/check/${e.infoId}`).then(res => {
        //console.log(res)
        this.$message(res.data.msg);
      });
    },
    getType() {
      let that = this;
      return new Promise(function(next, err) {
        that.postRequest(`comm/queryCategoryByType`, { type: 'info_type' }).then(res => {
          that.type = res.data.data;
          that.radio = that.type[0].categoryCode;
          //console.log(that.type);
          next();
        });
      });
    },
    getGroup() {
      let that = this;
      that.postRequest(`/back/circleinfos/query`, { page: that.page, size: that.size, type: that.radio }).then(res => {
        that.data = res.data.data;
        that.list = res.data.data.list;
      });
    },
    getData() {
      //查询帖子
      let that = this;
      return new Promise(function(next, err) {
        that.postRequest(`/back/circleinfos/query`, { page: that.page, size: that.size, type: that.radio }).then(res => {
          that.data = res.data.data;
          that.list = res.data.data.list;
          //console.log(res);
          next();
        });
      });
    }
  }
};
</script>

<style></style>
